import { Project } from '@entities/Projects/model/types/Project'
import { Avatars } from '@shared/ui/Avatars'
import { IconFont } from '@shared/ui/IconFont'
import { Panel } from '@shared/ui/Panel'
import { Popover } from '@shared/ui/Popover'
import { Title } from '@shared/ui/Title'
import moment from 'moment'
import { memo } from 'react'
import { NavLink } from 'react-router-dom'
import styles from './ProjectCard.module.scss'
moment.locale('ru')

interface ProjectCardProps {
  className?: string
  project: Project
}

export const ProjectCard = memo(({ project }: ProjectCardProps) => {
  const { id, text, title } = project

  return (
    <>
      <Panel className={styles['project-card']} pointer withShadow>
        <NavLink to={`/projects/${id}`}>
          <div className={styles['project-info']}>
            <Title className={styles['project-title']} tag='h4'>
              {title}
            </Title>
            <Popover
              placementPanel='bottom-start'
              renderButton={() => <IconFont iconName='icon-menu-dots' />}
              renderPanel={() => <div className={styles['tag-list']}>затычка</div>}
            ></Popover>
          </div>
          <div className={styles['project-info-details']}>{text}</div>
          <div className={styles['project-avatars']}>
            <Avatars imageUrl='' size='small' />
            <span className={styles['avatar-count']}>&#43;2</span>
          </div>
        </NavLink>
      </Panel>
    </>
  )
})

ProjectCard.displayName = 'ProjectCard'
